@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');







:root {
  --primary-color: #074483;
  --light-primary: #B0C8DC;
  --lightest-color: #e9ebd5;
  --secondary-color: #67B2DD;
  --light-secondary: #01A6AA;
  }

.icons{
   display: flex; 
   justify-content:space-between;
   align-items: center;
   transition-property:-webkit-transform;
   transition-duration: 0.5s;
   transition-timing-function: ease-out;
 }


.iconsCab {
  display: flex; 
  justify-content:right;
  align-items:end;
  grid-template-columns: repeat(3, auto);
  gap:10px; /* Pequeno espaço entre as imagens */
  
  }
 
  
   b{
    
    display: flex;
    align-content:space-between;

  }
  

 p{
      display: flex;
      row-gap: 1rem;
      align-items:stretch;
      padding:4px;
      background: -webkit-linear-gradient(#d9041616,#010326);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
      font-family:Century Gothic;
      font-size: 18px;
      box-shadow:5px 10px #074483;
      border-radius: 6px;
      width: max-content;
      height: 30px; 

      & strong abbr:hover{

      background: -webkit-linear-gradient(#ea517fe7,#d8e344f5);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
      }

       }



.icons .caldeiras:hover {

   -webkit-transform:scale(1.75);
}
.icons .hidrometros:hover {

   -webkit-transform:scale(1.75);
}
.icons .quimicos:hover {

   -webkit-transform:scale(1.75);



  
}


img {
       
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        max-width: 80%;
        height: auto;
        border-radius:  10px var(--primary-color); 
        justify-content:center;
        align-items:center;
        transition:.5s ease-in-out;
      }
      
     
     .girar {
    border-radius: 50%;
    position: absolute;
    width: 150px;
    height: 150px;
    padding: 5px;
    left: 15px;
    top: 0.8rem;
    overflow: hidden;
    transition-property:rotate;
    transition-duration: 3.5s;
    transition-timing-function: ease-out;

   &:last-child:hover{
        rotate: 2.00turn;
       
       }
      }


.girar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ou "contain" dependendo do efeito desejado */
     
   }

  @keyframes loading {
    0% {
        transform: rotate(0)
    }
    

    50% {
        transform: rotate(-360deg)
        
    }
  }
  a{
      animation: loading 5s linear alternate-reverse ;
  
      position:relative;
      
      
      mix-blend-mode: multiply;
    
      display:flex;
     
      
      max-width: 15%;
      
     
}
.obs{
      display:flex;
      max-width: 90%;

      position:relative;
      box-shadow: inset -10px -10px -20px rgba(0, 0, 0, 0.4), 5px 25px 10px -10px  rgba(0, 0, 0, 0.2) ;
      
      animation:15.5s ease-in-out infinite alternate running animacao-obs;
    }

  
   @keyframes animacao-obs {
    0% {
        transform: translate(0, 0)
    }
    25% {
        transform: translate(250px, -150px)
    }
     50% {
        transform: translate(500px, 0) rotate(360deg)
    }
    

    75% {
        transform: translate(750px, -15px)
        
    }
     100% {
        transform: translate(1000px, 0)
        
    }
    0%,
    50%,
    100%{
       box-shadow: inset -10px -10px -20px rgba(0, 0, 0, 4), 5px 25px 10px -10px  rgba(0, 0, 0, 2) ;

    }
    25%,
    50%{

      box-shadow: inset -10px -10px -20px rgba(0, 0, 0, 4), 5px 125px 10px -10px  rgba(0, 0, 0, 2) ;
    }
  }

     

    
footer {


  text-decoration: none;
  color:var(--primary-color);
  gap: 5px; /* Pequeno espaço entre as imagens */
  padding: 5px 890px;
}
/*    
@media all and (max-width:1160pix){
  
}
@media all and (max-width:999pix){
  


} */